<template>
  <div class="uploadImage_box" :style="{width: width,height: height}" v-loading="loading">
    <el-upload
      class="singleImage_uploader"
      :action="`${IMAGEHOST}/File/Upload`"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :show-file-list="false">
      <div v-if="imgUrl" class="isExist_container">
        <img-card width="100%" height="100%" :src="imgUrl"></img-card>
        <div v-if="imgName" class="imgName">{{imgName}}</div>
        <div class="hover_shade">
          <div class="hover_shade_main">
            <i class="el-icon el-icon-edit-outline"></i>
            <p class="text">点击修改</p>
          </div>
        </div>
      </div>
      <div v-else class="noExist_container">
        <i class="el-icon-plus"></i>
        <span v-if="imgName" class="imgNmae">
          {{imgName}}
        </span>
      </div>
    </el-upload>
  </div>
</template>

<script>
import { transformImgUrl } from '@/filters'
import Emitter from 'element-ui/src/mixins/emitter'
export default {
  name: 'uploadImage',
  mixins: [Emitter],
  props: {
    value: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    },
    imgName: {
      type: String,
      default: null
    }
  },
  computed: {
    IMAGEHOST () {
      return process.env.IMAGE_HOST
    },
    Avatar: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
        this.$emit('change', val)
        this.dispatch('ElFormItem', 'el.form.change', val)
      }
    }
  },
  data () {
    return {
      loading: false,
      imgUrl: null
    }
  },
  mounted () {
    this.imgUrl = this.Avatar
  },
  methods: {
    transformImgUrl,
    beforeUpload () {
      this.loading = true
    },
    handleSuccess (result) {
      this.loading = false
      if (result.stateCode === 200) {
        this.imgUrl = result.data.objectId
        this.Avatar = this.imgUrl
      } else {
        this.$message.error('上传失败！')
      }
    }
  }
}
</script>
<style lang="less">
.uploadImage_box
{
  display: block;
  .noExist_container
  {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .el-icon-plus
    {
      font-size: 24px;
      color: #999;
    }
    .imgNmae
    {
      font-size: 12px;
      color: #999;
      height: 20px;
      line-height: 20px;
      margin-top: 5px;
    }
  }
  .isExist_container
  {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .imgName
    {
      position: absolute;
      background-color: rgba(0,0,0,.5);
      height: 25px;
      bottom: 0;
      left: 0;
      width: 100%;
      font-size: 12px;
      line-height: 25px;
      color: #fff;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .hover_shade
    {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.5);
      display: none;
      .hover_shade_main
      {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        .el-icon-edit-outline
        {
          font-size: 24px;
        }
        .text
        {
          font-size: 12px;
          height: 20px;
          line-height: 20px;
        }
      }
    }
    &:hover
    {
      .imgName
      {
        display: none;
      }
      .hover_shade
      {
        display: block;
        cursor: pointer;
      }
    }
  }
}
</style>
